<template>
  <!-- 我要报价 -->
  <view class="container">
    <view class="content">
      <text class="custom-title">寻车信息</text>
      <view class="select-item">
        <view class="item-left">
          <text class="star">*</text><text class="name">求购车型</text></view
        >
        <view class="item-right">
          <view class="qiugou">
            <view class="chexing">
              <view class="car-name">{{ carInfo.cars_name }}</view>
              <view class="car-model">{{ carInfo.source_type_name }}</view>
            </view>
            <view class="price">指导价:{{ carInfo.guide_price }}万</view>
          </view>
        </view>
      </view>
      <view class="select-item">
        <view class="item-left">
          <text class="star">*</text><text class="name">我的报价</text></view
        >
        <view class="item-right">
          <view
            @click="fillQuote"
            class="flex-1 t-right"
            v-if="formData.price"
            >{{ formData.price }}</view
          >
          <view @click="fillQuote" class="placeholder flex-1" v-else
            >请填写报价</view
          >
          <text class="unit">万</text>
        </view>
      </view>
      <view class="select-item">
        <view class="item-left">
          <text class="star">*</text><text class="name">定金</text></view
        >
        <view class="item-right">
          <view class="item-right">
            <!--         <view
              @click="fillDeposit"
              class="flex-1 t-right"
              v-if="formData.deposit_price"
              >{{ formData.deposit_price }}</view
            > -->
            <input
              placeholder-class="my-input-placeholder"
              class="deposit_price_input"
              placeholder="请填输入金额"
              type="number"
              v-model="formData.deposit_price"
            />
            <!-- <view class="placeholder flex-1" v-else>请填输入金额</view> -->
            <text class="unit">元</text>
          </view>
        </view>
      </view>
      <view class="select-item" style="border-bottom: none">
        <view class="item-left">
          <text class="star">*</text><text class="name">报价联系人</text></view
        >
        <view class="item-right">
          <view
            @click="fillContacts"
            class="flex-1 t-right"
            v-if="formData.quotation_contacts_id"
            >{{ currentConnect.name }}{{ currentConnect.phone }}</view
          >
          <view v-else @click="fillContacts" class="placeholder flex-1"
            >请选择报价联系人</view
          >
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    <view class="content">
      <text class="custom-title">交易细节</text>
      <view class="select-item">
        <view class="item-left"> <text class="name">自提距离</text></view>
        <view class="item-right">
          <view
            @click="fillDistance"
            class="flex-1 t-right"
            v-if="formData.distance_id"
            >{{ formData.distance }}</view
          >
          <view v-else @click="fillDistance" class="placeholder flex-1"
            >请选择</view
          >
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
      <view class="select-item">
        <view class="item-left"> <text class="name">店保情况</text></view>
        <view class="item-right">
          <view
            @click="fillStore"
            class="flex-1 t-right"
            v-if="formData.store_protection_id"
            >{{ formData.store_protection }}</view
          >
          <view v-else @click="fillStore" class="placeholder flex-1"
            >请选择</view
          >
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
      <view class="select-item">
        <view class="item-left"> <text class="name">开票类型</text></view>
        <view class="item-right">
          <view class="tag-list">
            <view
              @click="tagClick(item, 'currentInvoicing')"
              v-for="(item, index) in invoicingList"
              :key="index"
              :class="{ active: currentInvoicing.id === item.id }"
              >{{ item.name }}</view
            >
          </view>
        </view>
      </view>
      <view class="select-item">
        <view class="item-left"><text class="name">发票</text></view>
        <view class="item-right">
          <view class="tag-list">
            <view
              @click="tagClick(item, 'currentInvoice')"
              v-for="(item, index) in invoiceList"
              :key="index"
              :class="{ active: currentInvoice.id === item.id }"
              >{{ item.name }}</view
            >
          </view>
        </view>
      </view>
      <view class="select-item">
        <view class="item-left"><text class="name">手续</text></view>
        <view class="item-right">
          <view class="tag-list">
            <view
              @click="tagClick(item, 'currentProcedures')"
              v-for="(item, index) in proceduresList"
              :key="index"
              :class="{ active: currentProcedures.id === item.id }"
              >{{ item.name }}</view
            >
          </view>
        </view>
      </view>
      <view class="select-item">
        <view class="item-left"> <text class="name">要求</text></view>
        <view class="item-right">
          <view class="tag-list">
            <view
              @click="tagClick(item, 'currentCollectionConditions')"
              v-for="(item, index) in collectionConditionsList"
              :key="index"
              :class="{ active: currentCollectionConditions.id === item.id }"
              >{{ item.name }}</view
            >
          </view>
        </view>
      </view>
      <!-- 			<view class="mark">
				<text>备注</text>
				<textarea v-model="mark" placeholder="请输入"></textarea>
			</view> -->
    </view>
    <view class="bottom-btn">
      <view class="custom-btn" @click="quoteFunc">确定</view>
    </view>
    <!-- 我的报价 -->
    <uni-popup ref="baojiaPop" type="bottom">
      <view class="bot-pop">
        <view class="title">我的报价</view>
        <view class="quote-type">
          <view
            :class="{ active: currentQuoteType.id === item.id }"
            v-for="(item, index) in quoteTypeList"
            :key="index"
            @click="quoteTypeClick(item)"
            >{{ item.name }}</view
          >
        </view>
        <view class="quote-input">
          <input
            :adjust-position="false"
            @blur="keyboardHeight = 0"
            :cursorSpacing="20"
            v-model="quotation_price"
            type="number"
            :placeholder="quoteUnit.placeholder"
          />
          <text class="unit">{{ quoteUnit.unit }}</text>
          <view class="custom-btn" @click="quoteConfirm">确定</view>
        </view>
      </view>
      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
    <!-- 定金 -->
    <uni-popup ref="depositPop" type="bottom">
      <view class="bot-pop">
        <view class="title">定金</view>
        <view class="quote-input">
          <input
            :adjust-position="false"
            @blur="keyboardHeight = 0"
            :cursorSpacing="20"
            v-model="deposit_price"
            type="number"
            placeholder="请输入金额"
          />
          <text class="unit">元</text>
          <view class="custom-btn" @click="depositConfirm">确定</view>
        </view>
      </view>
      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
    <!-- 自提距离 -->
    <uni-popup ref="distancePop" type="bottom">
      <view class="bot-pop">
        <view class="title">自提距离</view>
        <view class="distance-list">
          <view
            @click="currentDistance = item"
            :class="{ active: currentDistance.id === item.id }"
            v-for="(item, index) in distanceList"
            :key="index"
            >{{ item.name }}</view
          >
        </view>
        <view class="custom-btn" @click="distanceConfirm">确定</view>
      </view>
    </uni-popup>
    <!-- 店保情况 -->
    <uni-popup ref="storePop" type="bottom">
      <view class="bot-pop">
        <view class="title">店保情况</view>
        <view class="store-list">
          <view
            @click="currentStore = item"
            :class="{ active: currentStore.id === item.id }"
            v-for="(item, index) in storeList"
            :key="index"
            >{{ item.name }}</view
          >
        </view>
        <view class="custom-btn" @click="storeConfirm">确定</view>
      </view>
    </uni-popup>
    <!-- 报价联系人 -->
    <uni-popup ref="connectPop" type="bottom">
      <view class="bot-pop">
        <view class="title">报价联系人</view>
        <view class="store-list">
          <view
            @click="connectConfirm(item)"
            :class="{ active: currentConnect.id === item.id }"
            v-for="(item, index) in connectList"
            :key="index"
          >
            <text>{{ item.name }}</text>
            <text>{{ item.phone }}</text>
          </view>
        </view>
        <view class="custom-btn" @click="addConnect">新增联系人</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  usedSearchDistance,
  usedSearchSituation,
  quotation,
  newsCarsSearchQuotationAdd,
} from "@/api/newCarSerach.js";
import { getContactList } from "@/api/secondhandCar.js";
export default {
  data() {
    return {
      keyboardHeight: 0,
      users_id: uni.getStorageSync("login").id,
      carInfo: {},
      quoteTypeList: [
        {
          id: "1",
          name: "优惠点数",
        },
        {
          id: "2",
          name: "优惠万元",
        },
        {
          id: "3",
          name: "加价万元",
        },
        {
          id: "4",
          name: "直接报价",
        },
      ],
      deposit_price: "",
      quotation_price: "",
      formData: {
        quotation: "", //报价类型 1：优惠点数 2：优惠万元 3：加价万元 4：直接报价
        quotation_price: "", //价格幅度
        price: "", //报价
        deposit_price: "", //定金
        distance_id: "", //距离id
        distance: "", //自提距离
        store_protection_id: "", //店保情况id
        store_protection: "", //店保情况
        quotation_contacts_id: "", //报价联系人
      },
      distanceList: [],
      currentDistance: {},
      storeList: [],
      currentStore: {},
      connectList: [],
      currentConnect: {},
      currentQuoteType: {
        id: "1",
        name: "优惠点数",
      },
      mark: "",
      invoicingList: [
        {
          id: "1",
          name: "普票",
        },
        {
          id: "2",
          name: "增票",
        },
      ],
      invoiceList: [
        {
          id: "1",
          name: "店票",
        },
        {
          id: "2",
          name: "汽贸票",
        },
      ],
      proceduresList: [
        {
          id: "1",
          name: "票证随车",
        },
        {
          id: "2",
          name: "票证不随车",
        },
      ],
      collectionConditionsList: [
        {
          id: "1",
          name: "本人到店",
        },
        {
          id: "2",
          name: "本人不到店",
        },
      ],

      currentInvoicing: {},
      currentInvoice: {},
      currentProcedures: {},
      currentCollectionConditions: {},
    };
  },
  onLoad(option) {
    this.carInfo = option;
  },
  onShow() {
    getContactList(this.users_id).then((res) => {
      if (res.code == 0) {
        this.connectList = res.data;
      }
    });
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  mounted() {
    // 店保情况
    usedSearchSituation("1").then((res) => {
      this.storeList = res.data;
    });
    // 自提距离
    usedSearchDistance("1").then((res) => {
      this.distanceList = res.data;
    });
  },
  computed: {
    quoteUnit() {
      let placeholder = "";
      let unit = "";
      if (this.currentQuoteType.id == "1") {
        placeholder = "请输入优惠点数";
        unit = "点";
      } else if (this.currentQuoteType.id == "2") {
        placeholder = "请输入优惠钱数";
        unit = "万元";
      } else if (this.currentQuoteType.id == "3") {
        placeholder = "请输入加价钱数";
        unit = "万元";
      } else if (this.currentQuoteType.id == "4") {
        placeholder = "请直接输入价格";
        unit = "万元";
      }
      return {
        unit: unit,
        placeholder: placeholder,
      };
    },
  },
  methods: {
    selectCar() {},
    tagClick(item, code) {
      this[code] = item;
    },
    fillQuote() {
      this.quotation_price = "";
      this.$refs.baojiaPop.open();
    },
    quoteTypeClick(item) {
      this.currentQuoteType = item;
    },
    quoteConfirm() {
      if (!this.quotation_price) {
        uni.showToast({
          title: "请输入报价",
          icon: "none",
        });
      } else {
        this.formData.quotation_price = this.quotation_price;
        quotation(
          this.currentQuoteType.id,
          this.quotation_price,
          this.carInfo.guide_price ? this.carInfo.model_two_id : ""
        ).then((res) => {
          this.formData.price = res.data.price;
          this.$refs.baojiaPop.close();
        });
      }
    },
    fillDeposit() {
      this.deposit_price = "";
      this.$refs.depositPop.open();
    },
    depositConfirm() {
      if (!this.deposit_price) {
        uni.showToast({
          title: "请输入定金",
          icon: "none",
        });
      } else {
        this.formData.deposit_price = this.deposit_price;
        this.$refs.depositPop.close();
      }
    },
    // 报价联系人
    fillContacts() {
      this.$refs.connectPop.open();
    },
    connectConfirm(item) {
      this.currentConnect = item;
      this.formData.quotation_contacts_id = item.id;
      this.$refs.connectPop.close();
    },
    addConnect() {
      uni.navigateTo({
        url: "/pages/home/connect/addConnect",
      });
    },
    selectedConnect(item) {
      this.formData.quotation_contacts_id = item.id;
      this.currentConnect = item;
      this.$refs.popup.close();
    },
    // 自提距离
    fillDistance() {
      this.$refs.distancePop.open();
    },
    distanceConfirm() {
      if (this.currentDistance.id) {
        this.formData.distance_id = this.currentDistance.id;
        this.formData.distance = this.currentDistance.name;
        this.$refs.distancePop.close();
      } else {
        uni.showToast({
          title: "请选择自提距离",
          icon: "none",
        });
      }
    },
    // 店保情况
    fillStore() {
      this.$refs.storePop.open();
    },
    storeConfirm() {
      if (this.currentStore.id) {
        this.formData.store_protection_id = this.currentStore.id;
        this.formData.store_protection = this.currentStore.name;
        this.$refs.storePop.close();
      } else {
        uni.showToast({
          title: "请选择店保情况",
          icon: "none",
        });
      }
    },
    // 确定报价
    quoteFunc() {
      if (!this.formData.price) {
        uni.showToast({
          title: "请填写报价",
          icon: "none",
        });
        return;
      }
      if (!this.formData.deposit_price) {
        uni.showToast({
          title: "请填写定金",
          icon: "none",
        });
        return;
      }
      if (!this.formData.quotation_contacts_id) {
        uni.showToast({
          title: "请选择报价联系人",
          icon: "none",
        });
        return;
      }
      newsCarsSearchQuotationAdd({
        users_id: this.users_id,
        car_search_id: this.carInfo.carId,
        ...this.formData,
        quotation: this.currentQuoteType.id,
        invoicing: this.currentInvoicing?.id,
        invoice: this.currentInvoice?.id,
        procedures: this.currentProcedures?.id,
        collection_conditions: this.currentCollectionConditions?.id,
      }).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "报价成功",
            duration: 1000,
          });
          setTimeout(() => {
            var pages = getCurrentPages();
            var prevPage = pages[pages.length - 2];
            prevPage.$vm.backData();
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-title {
  padding: 0 30rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #05052a;
  line-height: 18rpx;
  background-image: url(/static/bac-small.png);
  background-size: 90rpx 33rpx;
  background-repeat: no-repeat;
  background-position: center 0;
}
.container {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  padding-bottom: 182rpx;
  .content {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 28rpx 0 0 0;
  }
  .select-item {
    padding: 35rpx 25rpx;
    border-bottom: 1rpx solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    .item-left {
      display: flex;
      align-items: center;
      .star {
        font-size: 24rpx;
        color: #ff0f0f;
        margin-right: 14rpx;
      }
      .name {
        font-size: 28rpx;
        white-space: nowrap;
      }
    }
    .item-right {
      display: flex;
      align-items: center;
      margin-left: 190rpx;
      flex: 1;
      > view {
        flex: 1;
      }
      .t-right {
        text-align: right;
      }
      .more {
        font-size: 30rpx;
        color: #666666;
        margin-left: 15rpx;
      }
      .placeholder {
        color: #999999;
        text-align: right;
      }
      .selc {
        margin-left: 200rpx;
      }
      .unit {
        color: #ff0f0f;
        margin-left: 5rpx;
      }
      uni-icons {
        margin-left: 18rpx;
      }
    }
  }
  .qiugou {
    .chexing {
      display: flex;
      .car-name {
        flex: 1;
        margin-right: 15rpx;
        line-height: 36rpx;
      }
      .car-model {
        white-space: nowrap;
        color: #ff0f0f;
        line-height: 36rpx;
      }
    }
    .price {
      color: #999;
      margin-top: 10rpx;
    }
  }
  .tag-list {
    display: flex;
    justify-content: flex-end;
    view {
      margin-left: 20rpx;
      height: 52rpx;
      line-height: 50rpx;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 27rpx;
      font-size: 24rpx;
      text-align: center;
      padding: 0 34rpx;
      &.active {
        background-color: #edf1ff;
        color: #0e59ea;
        border-color: #edf1ff;
      }
    }
  }
  // 备注
  .mark {
    padding: 40rpx 28rpx;
    textarea {
      height: 180rpx;
      margin-top: 20rpx;
      width: 100%;
      padding: 15rpx 20rpx;
      border: 1px solid #e6e6e6;
      border-radius: 14rpx;
    }
  }
}
.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  height: 162rpx;
  padding: 0 28rpx;
  box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-btn {
  flex: 1;
  width: 100%;
  color: #fff;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  background: #0e59ea;
  border-radius: 14rpx;
  font-size: 28rpx;
}
.bot-pop {
  background-color: #fff;
  width: 100%;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 40rpx 28rpx 30rpx;
  .title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 800;
    margin-bottom: 39rpx;
  }
}
// 报价类型
.quote-type {
  display: flex;
  align-items: center;
  gap: 18rpx;
  margin-bottom: 30rpx;
  view {
    box-sizing: border-box;
    flex: 1;
    border: 1px solid #cccccc;
    border-radius: 4rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    &.active {
      color: #fff;
      background-color: #0e59ea;
      border-color: #0e59ea;
    }
  }
}
.quote-input {
  display: flex;
  gap: 22rpx;
  position: relative;
  input {
    flex: 1;
    height: 92rpx;
    background: #f3f3f3;
    border-radius: 14rpx;
    padding: 0 100rpx 0 20rpx;
  }
  .custom-btn {
    flex: auto;
    max-width: 173rpx;
    min-width: 173rpx;
    width: 173rpx;
    height: 92rpx;
    line-height: 92rpx;
  }
  .unit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 220rpx;
    color: #ff0f0f;
  }
}
// 自提距离
.distance-list {
  margin-bottom: 50rpx;
  display: flex;
  gap: 18rpx;
  view {
    box-sizing: border-box;
    width: 25%;
    border: 1px solid #cccccc;
    border-radius: 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    &.active {
      color: #fff;
      border-color: #0e59ea;
      background-color: #0e59ea;
    }
  }
}
// 店保情况
.store-list {
  margin-bottom: 30rpx;
  padding: 0 10rpx;
  max-height: 100prx;
  overflow-y: auto;
  view {
    border-bottom: 1rpx solid #f9f9f9;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      border-bottom: none;
    }
    &.active {
      color: #0e59ea;
    }
  }
}
.flex-1 {
  flex: 1;
}
.deposit_price_input {
  text-align: right;
}
</style>
<style>
.my-input-placeholder {
  color: #999;
}
</style>